<template>
  <div class="table-box">
    <div @click="editPop(item.templateId)" v-for="(item,index) of $store.state.formList" :key="index" class="table">
      <div class="table-tit">
        {{`${item.componenList[0].attribute.titName}:${item.componenList[0].attribute.filedValue}`}}
        <div @click.stop="deltedPop(index)" v-if="$store.state.formList.length>1" class="table-tit-img">
          <img src="https://gw.alicdn.com/tfs/TB1OqD_IrPpK1RjSZFFXXa5PpXa-38-38.png">
        </div>
      </div>
      <div class="table-con">
        <div v-if="ind!=0" v-for="(it,ind) of item.componenList" :key="ind">
          <!--如果是论坛组件则显示不一样 -->
          {{`${it.attribute.titName}:${it.componentName=='selForumTem'?it.attribute.filedValuebbsname:it.attribute.filedValue}`}}
        </div>
      </div>
      <div class="msg-box">
        <div v-if="item.result===false" class="msg-errorMsg">
          报名失败:
          {{ item.errorMsg}}
        </div>
        <div v-if="item.result===true" style="color: #67c23a;" class="msg-sucess">报名成功</div>
      </div>
    </div>
    <!-- 添加参加人 -->
    <div @click="appPople()" style="margin-bottom:3.6rem" class="template-container">
      <!-- <div style="border:none" class="big-box">
        <div class="title">
        </div>
        <div class="con">
          <input style="padding-left:38%;font-size:1.1rem;color: #A0A0A0;" readonly="readonly" placeholder="添加参加人 +" type="text">
        </div>
      </div> -->
    </div>
    <!-- 服务协议 -->
    <div style="margin-bottom:8.8rem;; cursor: pointer;" class="Agre-box">
      <img @click="check=true" v-if="!check" style="width: 1.6rem;" src="https://gw.alicdn.com/tfs/TB1_m_8IwTqK1RjSZPhXXXfOFXa-64-64.png">
      <img @click="check=false" v-if="check" style="width: 1.6rem;" src="https://gw.alicdn.com/tfs/TB1Ex3CIxnaK1RjSZFtXXbC2VXa-64-64.png">
      <div style="margin:0rem 0.36rem;color:#797979;" class="Agre-tit">
        我已阅读并同意
      </div>
      <div @click="$router.push({  name: 'check' });" style="color:#FF3E85" class="Agre-tit">
        《大会报名服务协议》
      </div>
    </div>
    <!-- 提交报名 -->
    <div class="submit-form-box">
      <div @click="subForm()" class="submit-form">
        提交报名
      </div>
    </div>
    <!-- 验证手机号码 -->
    <div @touchmove.prevent>
      <phoneCode></phoneCode>
    </div>
  </div>
</template>
<script>
import phoneCode from "./phoneCode";
import { formListCheck } from "./js/vuexFormList.js";
export default {
  components: {
    phoneCode
  },
  data() {
    return {
      tableList: [], //表格数据
      check: true
    };
  },
  created() {
    // 如果没有报名字段则返回重新获取
    if (this.$store.state.formFiled.componenList.length == 0) {
      this.$Toast({
        message: "报名表单数据获取失败，将重新获取",
        position: "middle",
        duration: 3000
      });
      // this.$router.push({
      //   name: "login"
      // });
    }
  },
  methods: {
    async subForm() {
      //填写表单的集合数据及认证是否必填项为空
      let subData = await formListCheck(this.$store.state.formList);
      if (subData) {
        if (!this.check) {
          this.$Toast({
            message: "请同意服务协议",
            position: "middle",
            duration: 3000
          });
          return;
        }
        this.$store.state.isShowPhoneAlert = true;
      }
    },
    // 编辑个人信息
    editPop(templateId) {
      this.$router.push({
        name: "editPop",
        params: {
          templateId: templateId
        }
      });
    },
    // 添加人员
    appPople() {
      let obj = JSON.parse(JSON.stringify(this.$store.state.formFiled));
      obj.templateId = Number(new Date());
      this.$store.state.formList.push(obj);
    },
    // 删除人员
    deltedPop(index) {
      this.$MessageBox.confirm("您确定要进行删除?").then(
        action => {
          if (action == "confirm") {
            this.$store.state.formList.splice(index, 1);
          }
          this.$Toast({
            message: "删除成功",
            position: "middle",
            duration: 3000
          });
        },
        err => {}
      );
    }
  }
};
</script>

<style scoped>
.Agre-box {
  width: 100%;
  height: auto;
  margin-top: 1rem;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.Agre-tit {
  font-size: 0.9rem;
  color: #fff;
}
.table-box {
  width: 100%;
  height: 100%;
  background: #f4f5f4;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.table {
  width: 100%;
  height: auto;
  background: #ffffff;
  margin-bottom: 0.8rem;
  padding: 0.26rem 0rem 0rem 0rem;
}
.table-tit {
  width: 100%;
  height: auto;
  min-height: 2.8rem;
  border-bottom: 1px solid #ededed;
  text-align: left;
  font-size: 1.2rem;
  color: #3a3a3a;
  padding: 0rem 3rem 0rem 1rem;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
}
.table-tit-img {
  width: 3rem;
  height: 100%;
  position: absolute;
  right: 0rem;
  top: 0rem;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  background: #fff;
  z-index: 2;
  cursor: pointer;
}
.table-tit-img > img {
  width: 1.16rem;
  height: auto;
}
.table-con {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-bottom: 0.82rem;
}
.table-con > div {
  width: auto;
  height: 1.16rem;
  line-height: 1.26rem;
  font-size: 0.9rem;
  color: #a0a0a0;
  border-right: 0.1rem solid #a0a0a0;
  float: left;
  padding: 0rem 0.48rem 0rem 0rem;
  margin-left: 1rem;
  margin-top: 0.6rem;
}
.template-container {
  width: 100%;
  height: auto;
  background: #fff;
  padding: 0rem 1.2rem;
}
.big-box {
  width: 100%;
  height: auto;
  position: relative;
  border-top: 0.1rem solid #ededed;
  cursor: pointer;
}

.title {
  width: 5.8rem;
  height: auto;
  padding: 0.36rem 0rem;
  min-height: 3.8rem;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 1.3rem;
  color: #3a3a3a;
  background: #fff;
  z-index: 2;
  cursor: pointer;
}

.con {
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  cursor: pointer;
}

.con > input {
  width: 100%;
  height: 100%;
  padding: 0.48rem 0.3rem 0.36rem 6.8rem;
  font-size: 1.3rem;
  color: #3a3a3a;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  cursor: pointer;
}
.submit-form-box {
  position: fixed;
  bottom: 0rem;
  left: 0rem;
  width: 100%;
  height: 5rem;
  z-index: 99;
  background: #ffffff;
  border-top: 0.1rem solid #dedede;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
.submit-form {
  background: #ff3e85;
  font-size: 1.4rem;
  color: #ffffff;
  width: 69%;
  height: 3.5rem;
  line-height: 3.5rem;
  cursor: pointer;
}
.submit-form:active {
  background: rgba(249, 29, 112, 0.6);
}
.msg-box {
  width: 100%;
  height: auto;
  text-align: left;
}
.msg-box > div {
  width: 100%;
  height: auto;
  padding: 0rem 1rem 0.3rem 1rem;
  font-size: 1rem;
  color: #ff3e85;
  background: #fff;
}
</style>
